<template>
    <div class="content">
        <el-card class="box-card">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="180px">
                <el-row>
                    <el-col :span="10">
                        <el-form-item label="身份证正面图：" style="" prop="id_card_number_up_image">
                            <uploadQualifications @changedata="changeIDUp" url="/id_card_ocr_api" isoppositeinfer="0"
                                image_type="2"></uploadQualifications>
                        </el-form-item></el-col>
                    <el-col :span="10">
                        <el-form-item label="身份证反面图：" style="" prop="id_card_number_down_image">
                            <uploadQualifications @changedata="changeIDDown" url="/id_card_ocr_api" isoppositeinfer="1"
                                image_type="2"></uploadQualifications>
                        </el-form-item></el-col>
                </el-row>
                <el-form-item label="营业执照图：" style="" prop="business_license_image">
                    <uploadQualifications @changedata="changeIDBusiness" image_type="2" url="/business_license_ocr_api">
                    </uploadQualifications>
                </el-form-item>
                <el-form-item label="营业执照号" prop="id_card_number">
                    <el-input v-model="ruleForm.business_license"></el-input>
                </el-form-item>
                <el-form-item label="身份证号" prop="id_card_number">
                    <el-input v-model="ruleForm.id_card_number"></el-input>
                </el-form-item>
                <el-form-item label="身份证日期">
                    <el-date-picker v-model="ruleForm.id_card_number_expiry_date" type="daterange" range-separator="至"
                        start-placeholder="开始日期" end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="营业执照日期" prop="business_license_expiry_date">
                    <el-date-picker v-model="ruleForm.business_license_expiry_date" type="date" placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
                    <el-button @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script>
import uploadQualifications from "@/components/UploadExcel/uploadQualifications.vue";
import { funtformatDate } from "@/utils/index";
export default {
    components: { uploadQualifications },
    data() {
        return {
            ruleForm: {},
            rules: {
                id_card_number_up_image: [
                    { required: true, message: "请上传身份证正面图", trigger: "blur" },
                ],
                id_card_number_down_image: [
                    { required: true, message: "请上传身份证反面图", trigger: "change" },
                ],
                business_license_image: [
                    { required: true, message: "请上传营业执照图", trigger: "change" },
                ],
                id_card_number: [
                    { required: true, message: "请输入身份证号", trigger: "change" },
                    {
                        pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
                        message: "身份证号码格式不正确",
                        trigger: "blur",
                    },
                ],
                business_license:[
                    { required: true, message: "请输入身份证号", trigger: "change" },
                ],
                id_card_number_expiry_date: [
                    { required: true, message: "请选择身份证日期", trigger: "change" },
                ],
                business_license_expiry_date: [
                    {
                        required: true,
                        message: "请选择营业执照日期",
                        trigger: "change",
                    },
                ],
            },
        };
    },
    methods: {
        convertDatesForDateRangePicker(start_date, end_date) {
            const startDate = new Date(start_date);
            const endDate = new Date(end_date);
            return [startDate, endDate];
        },
        changeIDUp(res) {
            console.log(res, "result");
            this.$nextTick(() => {
                this.$set(this.ruleForm, "id_card_number_up_image", res.db_save_dir); //身份证正面图
                this.$set(this.ruleForm, "id_card_number", res.id); //身份证号
                this.$set(
                    this.ruleForm,
                    "id_card_number_up_certificate_id",
                    res.name_id
                ); //身份证正面id
            });
        },
        changeIDDown(res) {
            this.$nextTick(() => {
                this.ruleForm.id_card_number_down_image = res.db_save_dir;
                this.ruleForm.id_card_number_down_certificate_id = res.name_id;
                this.$set(
                    this.ruleForm,
                    "id_card_number_expiry_date",
                    this.convertDatesForDateRangePicker(res.start_date, res.end_date)
                );
            });
        },
        changeIDBusiness(res) {
            this.$nextTick(() => {
                console.log(res, "res3");
                this.ruleForm.business_license_image = res.db_save_dir;
                this.ruleForm.business_license_certificate_id = res.name_id;
            });
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.ruleForm.id_card_number_expiry_date =
                        funtformatDate(
                            this.ruleForm.id_card_number_expiry_date[0],
                            "yyyy-mm-dd"
                        ) +
                        "/" +
                        funtformatDate(
                            this.ruleForm.id_card_number_expiry_date[1],
                            "yyyy-mm-dd"
                        );
                    this.ruleForm.business_license_expiry_date = funtformatDate(
                        this.ruleForm.business_license_expiry_date,
                        "yyyy-mm-dd"
                    );
                    this.ruleForm.store_id = this.isStore_id;
                    console.log(this.ruleForm, "ruleForm");
                    this.https(
                        "/upload_qualification_certificate_api",
                        this.ruleForm
                    ).then((result) => {
                        this.$message({
                            message: "资质上传完毕",
                            type: "success",
                        });
                        this.$router.push("/authRedirect");
                    });
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
    },
    mounted() { },
    computed: {
        isStore_id() {
            return this.$store.state.user.store_id;
        },
    },
};
</script>
<style lang="scss" scoped>
.content {
    width: 100%;
    height: 100%;
    display: flex;
    //   justify-content: center;
    //   align-items: center;
}

.box-card {
    //   width: 50%;
    //   height: 50%;
    margin: 2vh;
}
</style>
